<template>
  <div class="app-container">
    <div class="container-fluid">
      <div class="filter-container addList">
        <div style="padding-bottom: 20px" class="at">
         <h3><span>{{ $route.meta.title }} </span>
                  </h3>
                  <h4 v-if='$route.query.months'>

                  <template v-if='typeof($route.query.months) ==="object"'>
                     {{new Date($route.query.months[0]).getFullYear() + '/' + (Number(new Date($route.query.months[0]).getFullYear())+ 1)}}
                  <span style="color:#00468C" :key='i'  v-for="(lists, i) in $route.query.months">{{new Date(lists).toDateString().split(' ')[1]}}</span>
                  </template>
                    <template v-else>
                   {{new Date($route.query.months).getFullYear() + '/' + (Number(new Date($route.query.months).getFullYear())+ 1)}}
                 <span style="color:#00468C"   >{{new Date($route.query.months).toDateString().split(' ')[1]}}</span>
                  </template>
                  </h4>
                </div>
                <el-form ref="info" :model="info" :rules="rules" class="event-from">
                  <el-form-item label="" prop="sport">
                    <el-select clearable  v-model="info.sport" placeholder="Sport"  style="width: 150px">
                      <el-option v-if='item' v-for="(item,i) in list.sportNames" :key="i" :label="item.typeName" :value="item" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="" prop="keyword">
                    <el-input v-model="info.keyword" placeholder="Name" style="width: 150px" />
                  </el-form-item>

                 <!-- <el-button type="button" class="el-button el-button--success" :loading="buttonDisable" style="height: 40px;" @click="onSubmit('info')"><span>Add</span></el-button> -->

                  <el-button type="button" class="el-button el-button--success" :loading="buttonDisable" style="height: 40px;"
                    @click="fetchData(1)"><span>Search</span></el-button>
                </el-form>
              </div>
              <!-- <div>
                <div class="totalResult">
                  {{list.list.totalResult}}
                </div>
              </div> -->
       <!-- <el-table>

       </el-table> -->
      <el-table v-loading="listLoading" :data="list.list" element-loading-text="Loading" border fit highlight-current-row stripe >
        <el-table-column prop="sportName"  label="Sport">
          <template slot-scope="scope">
            <span>{{ scope.row.sportName }}</span>
          </template>
        </el-table-column>
       <el-table-column prop="firstName"   label="Name">
         <template slot-scope="scope">
              <span :style='scope.row.bankDetail=="Grand-total"?"font-weight: 650;":""'>{{scope.row.bankDetail=="Grand-total"?scope.row.bankDetail: FilterName(scope.row)}}</span>

         </template>
       </el-table-column>
        <el-table-column  prop="bankAccount"
 v-if='(typeof($route.query.months) ==="object"&&$route.query.months.length<=1)||(typeof($route.query.months)!=="object")'

         label="Bank Account(Previous)">
          <template slot-scope="scope">
           <span>{{scope.row.bankAccount||'-'}}</span>
            </template>
        </el-table-column>
<el-table-column v-if='(typeof($route.query.months) ==="object"&&$route.query.months.length<=1)||(typeof($route.query.months)!=="object")' prop="bankDetail"  label="Bank Detail"
  min-width="85">
          <template slot-scope="scope">
            <span >{{scope.row.bankDetail!=="Grand-total"?scope.row.bankDetail:'-'}}</span>
             </template>
        </el-table-column>

<el-table-column prop="monthAmount"
          :key='m' v-if='$route.query.months'
          v-for='(mItme , m) in typeof($route.query.months) ==="object"?$route.query.months:[$route.query.months]'
        :label="new Date(mItme).toDateString().split(' ')[1] + ' ' + 'Sessions'">
           <template slot-scope="scope">
              <span  :style='scope.row.bankDetail=="Grand-total"?"font-weight: 650;":""' :key='L' v-for='(mL , L) in scope.row.monthAmount' v-if='mL.month ===mItme' >{{ (mL?mL.amount:'-' )|| '-'}}</span>
              <span  :style='scope.row.bankDetail=="Grand-total"?"font-weight: 650;":""'>-</span>
            </template>
          </el-table-column>
      </el-table>
          <div class="btm-btn-groupss marTop flex-box center">
             <el-button type="success" @click='$router.back(-1)'>Back</el-button>
            <el-button type="success" @click='exportFn'>Export</el-button>
             <el-button type="text"  class="posAb posRig">
              <el-pagination
                layout="sizes, prev, pager, next"
                :page-size="listQuery.size"
                :current-page="listQuery.page"
                :page-sizes="[25, 50, 100]"
                :total="listQuery.total"
                class="pagination-container"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
              />
             </el-button >

          </div>

    </div>
  </div>
</template>
<script>
    import {
    queryAutopayList
    } from '@/api/account.js'

    import { addEventScene, modifyEventScene, delEventScene, getEventScene } from '@/api/event'
    import { SubtotalSameKeyList } from '@/utils'
    import {getBelongingTypes} from "@/api/setting.js"
    export default {
        components: {

        },
        data() {
            return {
              scopes:(e)=>{
                debugger
              },
                list: {
                    list: [],
                    monthTotal:{}
                },
                CLASS_TYPE: [],
                local:{},
                SPORTS_TYPE: [],
                EVENT_COUNTRY: [],
                buttonDisable: false,
                EVENT_TYPE: [],
                listLoading: true,
                link: '/event/addEdit',
                info: {
                    months: '',
                    keyword: '',
                    sport: '',
                },
                listQuery: {
                    keyword: '',
                    page: 1,
                    size: 25
                },
                rules: {
                    // eventName: [
                    //     { required: true, message: 'Event cannot be empty', trigger: 'change' }
                    // ],

                    // eventProject: [
                    //     { required: true, message: '項目 cannot be empty', trigger: 'blur' }
                    // ],
                    // sport: [
                    //     { required: true, message: 'Sport cannot be empty', trigger: 'blur' }
                    // ],
                    // types: [
                    //     { required: true, message: 'Types cannot be empty', trigger: 'blur' }
                    // ],
                    // participants: [
                    //     { required: false, message: 'Participants cannot be empty', trigger: 'blur' }
                    // ],
                    // countries: [
                    //     { required: false, message: 'Countries select', trigger: 'change' }
                    // ]
                }
            }
        },
        created() {
            const query = this.$route.query
            // this.$store.dispatch("app/getType", 'RATE_TITLE')
            // this.$store.dispatch("app/getType", 'VENUE')
            // this.$store.dispatch("app/getType", 'COURSE_TYPE')
            // this.$store.dispatch("app/getType", 'RATE_TITLE')
            this.fetchData()
            // this.restaurants = this.loadAll()
        },
        computed:{
          exportLink(){
            return ''
          }
        },
        methods: {
            fetchData(page,size) {
               let query = this.$route.query
               let months = this.$route.query.months
               //  console.log("大范甘迪",titl,months,!months||typeof(months)!=='object')
               months = months&&typeof(months) ==='object'?months.join(','):months;
                let titl  = 'Autopay '+ (months.indexOf(',')>-1?'Multiple':'Single')+' Month'
               this.$parent.$parent.$children[1].$children[1].levelList[1].meta.title  = titl
              let info = this.info
              info.months = months
                   //  debugger
                   //  alert(123)
                queryAutopayList({
                  page:page?page:this.listQuery.page,size:size?size:this.listQuery.size,
                  ...info}).then(response => {
                  //response = this.local
                   if (response.status === 0) {
                     if(!response.result.monthTotal){response.result.monthTotal=this.list.monthTotal}
                     if(this.listQuery.page>1){
                       response.result.sportNames = this.list.sportNames
                     }
                    this.list = response.result
                    let lis = response.result.list
                   // this.list.sceneList = response.result.list || []
                    //  alert(JSON.stringify(this.list))
                        // this.list.list =  SubtotalSameKeyList(this.list.monthTotal,lis,'sportName', 'month','monthAmount')
                        response.result.totalResult.map((list)=>{
                        list.amount =  list.monthTotal
                        })

                        this.list.list.unshift({bankDetail:'Grand-total',monthAmount:response.result.totalResult})
                        this.listQuery.total = response.result.total ? response.result.total : this.listQuery.total
                        //this.listQuery.size =this.list.totalPage
                     }
                    console.log("aaaaa ",this.list.list)
                    this.listLoading = false
                })


            },
           exportFn(){
             let barName = 'account/'+this.$route.meta.exports
             this.$store.dispatch('app/onExport',{barName,params:{...this.info,token:this.list.exportToken}})
           },
           // pageSize变化事件
           handleSizeChange(val) {
             this.listQuery.size = val
             this.fetchData()
           },
           // pageNum变化事件
           handleCurrentChange(page) {
             this.listQuery.page = page
              this.fetchData()
               // this.trainScheduleList(page, this.activeName)
           },
           sportMedicineFormatLink(row, column) {
               return row.row.id = 1
           }
        }
    }
</script>
<style scoped="scoped" lang="scss">
   .addList{
     .event-from{
       text-align: left;
     }
     .event-from .el-input{
       margin-right:5px;
     }

     .event-from .el-form-item{
       margin-right:5px;
       display: inline-block;
     }
     .event-from .el-input input{
       border-radius: 0;
     }
   }
  .addList .at span{color: #586982;margin-right: 20px;}
</style>
